<template>
	<div>
		<el-dialog title="流程详情" :close-on-click-modal="false" v-model="visible" width="95%" @close="refreshEmit">
			<el-container>
				<el-main>
					<el-card>
						<el-form :model="dataForm" :rules="dataRule" :validate-on-rule-change="false" ref="dataFormRef"
							label-width="100px">
							<el-form-item v-for="(item,index) in startNodeInfo.formProperties" :key="index"
								:label="item.name" :prop="item.id">
								<el-input v-if="item.type === 'string'" v-model="dataForm[item.id]"
									:placeholder="item.name" :disabled="true"></el-input>
								<el-select v-if="item.type === 'enum'" v-model="dataForm[item.id]" filterable
									:placeholder="item.name" :disabled="true">
									<el-option v-for="itemc in item.formValues" :key="itemc.id" :label="itemc.name"
										:value="itemc.id"></el-option>
								</el-select>
								<el-input v-if="item.type === 'long'" v-model="dataForm[item.id]"
									:placeholder="item.name" type="number" max="200" min="0" :disabled="true">
								</el-input>
								<el-date-picker v-if="item.type === 'date'" v-model="dataForm[item.id]"
									:placeholder="item.name" type="date" :disabled="true"></el-date-picker>
							</el-form-item>
						</el-form>
					</el-card>
					<el-card style="margin-top:10px">
						<ApproveCommonFoot v-model:modelValue="taskParam" @refreshEmit="refreshEmit"
							@dataFormSubmit="dataFormSubmit" :isUpload="true" :disagreeShow="true"
							:taskId="taskParam.taskId" :processId="taskParam.insId" :busNo="taskParam.busNo">
						</ApproveCommonFoot>
					</el-card>
				</el-main>
				<el-aside width="300px">
					<ApproveHisDetailFoot ref="processdetailfoot" :processId="taskParam.insId"></ApproveHisDetailFoot>
				</el-aside>
			</el-container>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, defineComponent } from 'vue'
import { ElMessage, ElLoading, FormInstance } from 'element-plus'
import { workflowApi } from '/@/api/workflowapi'
import ApproveHisDetailFoot from "./approveHisDetailFoot.vue" //流程处理记录
import ApproveCommonFoot from "./approveCommonFoot.vue" //流程处理交互操作
export default defineComponent ({
	components: {
		ApproveHisDetailFoot,
		ApproveCommonFoot
	},
	setup(props, ctx) {
		const processdetailfootRef = ref()
		/**
		 * 内容宽度
		 */
		const contentWidth = {
		anchorPointWidth: '170px',
		recordWidth: '260px'
		}
		const dataFormRef = ref<FormInstance>()
		const state = reactive({
			visible: false,
			dataForm: [],
			startNodeInfo:{},
            dataRule: {
            },
            // taskId: '',
			rightWidth: contentWidth.recordWidth,
			//流程相关表单数据
			taskParam: {
				taskId: '',
				busNo: '',
				discicription: '', //审批意见
				processKey: '',
				approveAdvice: '',//审批结果
				briefReport: '',//流程摘要,业务发起流程传入
				skipFirstNode: true,
				wf_param: {},
				variablesLocal: {},
				authCatagory: '',
				owner: '',// 授权人，从授权处理的流程点击进来的这个值为授权人
				formProperties: {},
				insId: ''
			},
		})
		// 打开弹窗
		const openDialog = (processId: string, taskId: string, busNo: string, designerId: string, designerCode: string, authCatagory: string, owner: string) => {
			state.visible = true
			state.taskParam.taskId = taskId
			state.taskParam.busNo = busNo
			state.taskParam.authCatagory = authCatagory ? authCatagory : '0'
			state.taskParam.owner = owner ? owner : ''
			state.taskParam.insId = processId
			workflowApi().getProcessInsLastNodeInfo(processId).then(data => {
                state.startNodeInfo = data
                let rulesForm = []
                data.formProperties.forEach((item, index, arr) => {
                    rulesForm[item.id]=item.value
                    if(true === item.required) {
                        state.dataRule[item.id] = [{ required: true, message: item.name + '不能为空', trigger: 'change' }]
                    }
                })
                state.dataForm = {...rulesForm}
            }).catch(() => {
                ElMessage.error('加载表单信息失败')
            })
		}
		const refreshEmit = () => {
			closeDialog()
			ctx.emit('refreshDataList')
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.visible = false;
		}
		const dataFormSubmit = (_taskParam: any) => {
			dataFormRef.value?.validate((valid) => {
				if (valid) {
					state.taskParam = _taskParam
					state.taskParam.formProperties = state.dataForm
					const loading = ElLoading.service({
						lock: true,
						text: '处理中',
						background: 'rgba(0, 0, 0, 0.7)',
					})
					workflowApi().subminTask(state.taskParam).then(data => {
						if (data && data.code === 0) {
							ElMessage.success('提交成功')
							refreshEmit()
						} else {
							ElMessage.error(data.msg)
						}
					}).catch(() => {
						ElMessage.error('提交流程失败')
					}).finally(() => {
						loading.close()
					})
				}
			})
		}
		return{
			openDialog,
			closeDialog,
			refreshEmit,
			processdetailfootRef,
			dataFormSubmit,
			dataFormRef,
			...toRefs(state),
		}
	}
})
</script>

<style>

</style>